<!doctype html> 
<!--[if IE]><![endif]--> 
<!--[if lt IE 7 ]> <html lang="es" class="no-js ie6"> <![endif]--> 
<!--[if IE 7 ]>    <html lang="es" class="no-js ie7"> <![endif]--> 
<!--[if IE 8 ]>    <html lang="es" class="no-js ie8"> <![endif]--> 
<!--[if IE 9 ]>    <html lang="es" class="no-js ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="es" class="no-js"> <!--<![endif]--> 
<head> 
	<script></script> 
	<meta charset="utf-8"> 
	<title>Chico-UI</title>
	
	<link rel="stylesheet" type="text/css" href="src/ml/css/chico-0.9.1.css">
	<link rel="stylesheet" href="/src/plugins/gallery/chico.gallery.css">
	
	<style> 
		/* Carousel list size */
		.YOUR_SELECTOR_Carousel .ch-carousel-content li {
			width:120px;
			height:120px;
		}
		
		/* Icons demo */
		.showroomIcons li{
			clear:left;
		}
		
		.showroomIcons .ico {
			float:left;
			margin:2px 10px 0 0;
		}
	</style>
</head>

<body>
	<h1>Chico-UI</h1>
	<div class="container">
		<h1>Header 1</h1> 
		<h2>Header 2</h2> 
		<h3>Header 3</h3> 
		<h4>Header 4</h4> 
		<h5>Header 5</h5> 
		<h6>Header 6</h6>
		<p>Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div> 

	<div class="box links"> 
		<h2>Links</h2> 

		<p><a href="http://www.mercadolibre.com">MercadoLibre</a></p> 
		<p><a href="http://www.mercadopago.com">MercadoPago</a></p> 
		<p><a href="http://www.mercadoshops.com">MercadoShops</a></p> 
		<p><a href="http://www.mercadoclics.com">MercadoClics</a></p> 
	</div> 

	<div class="box"> 
		<h2>Boxes</h2> 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">adipiscing</a>. Donec sit amet purus in sapien luctus sodales <a href="#">adipiscing</a>. Curabitur dui velit, cursus in <a href="#">adipiscing</a> sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.</p>
	</div> 

	<div class="box clearfix">
		<h2>Buttons</h2>
		<div class="ch-g1-2">
			<p><input type="button" class="ch-btn ch-main" value="Main button"></p>
			<br>
			<p><input type="button" class="ch-btn ch-primary" value="Primary button"></p>
			<br>
			<p><input type="button" class="ch-btn ch-secondary" value="Secondary button"></p>
			<br>
			<p><input type="button" class="ch-btn ch-secondary ch-skin" value="Secondary button cyan"></p>
		</div>
		<div class="ch-g1-2">
			<p><input type="button" class="ch-btn ch-main disabled" disabled value="Main disabled"></p>
			<br>
			<p><input type="button" class="ch-btn ch-primary disabled" disabled value="Primary disabled"></p>
			<br>
			<p><input type="button" class="ch-btn ch-secondary disabled" disabled value="Secondary disabled"></p>
			<br>
			<p><input type="button" class="ch-btn ch-secondary ch-skin disabled" disabled value="Secondary skin disabled"></p>
		</div>
	</div>
	
	<div class="box"> 
		<h2>AutoComplete</h2> 
		<form method="get" action="/" id="asForm">
			<div class="autoComplete">
				<input type="text" id="autocomplete" placeholder="Write a country name" />
				<ul></ul>
			</div>
				<input type="submit" class="btn secondary skin" />
		</form>
	</div> 
	
	<div class="box">
		<h2>Blink</h2>
		<p id="example">This is a text that you can blink</p>
		<p>
			<button class="btn secondary skin" id="doHighlight">Blink the paragraph</button>
		</p>
	</div>

	<div class="box">
		<h2>Pagination</h2>
		<ul class="pagination">
			<li><a type="prev" href="/2.html">Previous</a></li>
			<li><a href="/1.html">1</a></li>
			<li><a href="/2.html">2</a></li>
			<li class="current"><a href="/3.html">3</a></li>
			<li><a href="/4.html">4</a></li>
			<li><a href="/5.html">5</a></li>
			<li><a type="next" href="/4.html">Next</a></li>
		</ul>
	</div>
	
	<div class="box">
			<table class="datagrid" summary="Listado de cobros en MercadoPago">
				<caption>Table</caption>
				<thead>
					<tr>
						<th scope="col"><input type="checkbox" name="mycheckall"/></th>
						<th scope="col">Datos de inicio</th>
						<th scope="col">Tipo de operación</th>
						<th scope="col" class="selected">Contraparte<span class="asc">(asc)</span></th>
						<th scope="col">Descripción</th>
						<th scope="col">Valor</th>
						<th scope="col">Status de la operación</th>
						<th scope="col">Acciones</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td scope="row"><input type="checkbox" name="mycheck"/></td>
						<td>02/04/2011</td>
						<td><a href="#">Valor de venta del producto</a></td>
						<td><a href="#">usuariontest@gmail.com</a></td>
						<td>Compras en MercadoLibre</td>
						<td><span class="value">$1200,30</span></td>
						<td>Pendiente de pago</td>
						<td>select	
						</td>
					</tr>
					<tr class="selected">
						<td scope="row"><input type="checkbox" name="mycheck" checked="checked"></td>
						<td>02/04/2011</td>
						<td><a href="#">Valor de venta del producto</a></td>
						<td><a href="#">usuariontest@gmail.com</a></td>
						<td>Compras en MercadoLibre</td>
						<td><span class="value">$1200,30</span></td>
						<td>Pendiente de pago</td>
						<td>select</td>
					</tr>
					<tr>
						<td scope="row"><input type="checkbox" name="mycheck"/></td>
						<td>02/04/2011</td>
						<td><a href="#">Valor de venta del producto</a></td>
						<td><a href="#">usuariontest@gmail.com</a></td>
						<td>Compras en MercadoLibre</td>
						<td><span class="value">$1200,30</span></td>
						<td>Pendiente de pago</td>
						<td>select</td>
					</tr>
					<tr>
						<td scope="row"><input type="checkbox" name="mycheck"/></td>
						<td>02/04/2011</td>
						<td><a href="#">Valor de venta del producto</a></td>
						<td><a href="#">usuariontest@gmail.com</a></td>
						<td>Compras en MercadoLibre</td>
						<td><span class="value">$1200,30</span></td>
						<td>Pendiente de pago</td>
						<td>select</td>
					</tr>
				</tbody>
			</table>
	</div>

	<div class="box"> 
		<h2>Expando</h2> 
		<div class="YOUR_SELECTOR_Expando"> 
			<h4>Lorem ipsum dolor sit amet.</h4> 
			<div> 
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.</p> 
			</div> 
		</div> 
	</div> 


	<div class="box">
		<h2>Accordion</h2>
		<ul class="YOUR_SELECTOR_Accordion">
			<li>
				<span>Item</span>
				<ul>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
				</ul>
			</li>
			<li>
				<span>Item</span>
				<ul>

					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
				</ul>
			</li>
			<li>
				<span>Item</span>
				<ul>

					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
				</ul>
			</li>
			<li>
				<span>Item</span>
				<ul>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Link</a>
			</li>
			<li>
				<a href="#">Link</a>
			</li>
		</ul>
	</div>


	<div class="box">
		<h2>Menu</h2>
		<ul class="YOUR_SELECTOR_Menu">
			<li>
				<span>Item</span>
				<ul>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
				</ul>
			</li>
			<li>
				<span>Item</span>
				<ul>

					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
				</ul>
			</li>
			<li>
				<span>Item</span>
				<ul>

					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
				</ul>
			</li>
			<li>
				<span>Item</span>
				<ul>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Link</a>
			</li>
			<li>
				<a href="#">Link</a>
			</li>
		</ul>
	</div>


	<div class="box">
		<h2>Dropdown</h2>
		
		<div class="myDropdown ch-dropdown">
			<p class="ch-dropdown-trigger">Links primary</p>
			<menu label="Links" class="ch-dropdown-content">
			    <li><a href="http://www.mercadolibre.com">MercadoLibre</a></li>
			    <li><a href="http://www.mercadopago.com">MercadoPago</a></li>
			    <li><a href="http://www.mercadoshops.com">MercadoShops</a></li>
			    <li><a href="http://www.mercadoclics.com">MercadoClics</a></li>
			</menu>
		</div>
		
		<div class="myDropdown ch-dropdown secondary">
			<p class="ch-dropdown-trigger">Links secondary</p>
			<menu label="Links" class="ch-dropdown-content">
			    <li><a href="http://www.mercadolibre.com">MercadoLibre</a></li>
			    <li><a href="http://www.mercadopago.com">MercadoPago</a></li>
			    <li><a href="http://www.mercadoshops.com">MercadoShops</a></li>
			    <li><a href="http://www.mercadoclics.com">MercadoClics</a></li>
			</menu>
		</div>
	</div>
	


	<div class="box"> 
		<h2>Tooltip</h2>
		<img class="YOUR_SELECTOR_Tooltip" alt="Playera Adidas Con Logo Nba Basketball ! !" src="http://img.mlstatic.com/org-img/rp2/termometro_vip_2/11.gif">
		<br>
		<img class="YOUR_SELECTOR_Tooltip" title="Playera Adidas Con Logo Nba Basketball \!\!" src="http://img.mlstatic.com/org-img/rp2/termometro_vip_2/11.gif">
		<br>
		<img class="YOUR_SELECTOR_Tooltip" title="Good seller - title" alt="Good seller - alt" src="http://img.mlstatic.com/org-img/rp2/termometro_vip_2/11.gif">
	</div> 


	<div class="box"> 
		<h2>Layer</h2> 
		<span class="YOUR_SELECTOR_LayerCloseButton">Executed on click, button closes.</span> 
		| <span class="YOUR_SELECTOR_LayerOnclick">Executed on click.</span> 
		| <span class="YOUR_SELECTOR_LayerOnmouseover">Executed on mouseover.</span> 
	</div> 

	<div class="box"> 
		<h2>Modal window</h2> 
		
		<form action="/test.html">
			<p class="actions">
				<input type="submit" class="ch-btn ch-secondary YOUR_SELECTOR_Modal" value="Executed by submit input">
				<a href="/test.html" class="YOUR_SELECTOR_Modal">Executed by link.</a>
			</p>
		</form>
	</div> 
	
	<div class="box"> 
		<h2>Modal window with DOM Content</h2> 
		
        <div class="container">
			<a href="/test.html" class="YOUR_SELECTOR_Modal_invisible">Modal with invisible DOM content.</a>
        </div>
		<div id="invisible-content" class="ch-hide">
    		<h1>This content is invisible</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.</p> 
		</div>
		
		<div id="invisible-content-for-layer" class="ch-hide">
    		<h1>This content is invisible for layer</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.</p> 
		</div>
	</div> 
	
	<div class="box"> 
		<h2>Transition window</h2> 
		<form action="/test.html"> 
			<input type="submit" class="ch-btn ch-secondary YOUR_SELECTOR_Transition" value="Exeute it!"> 
		</form> 
	</div>

	<div class="box"> 

		<h2>Carousel</h2> 

		<div class="YOUR_SELECTOR_Carousel ch-carousel"> 
			<ul> 
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
				<li><img src="http://img1.mlstatic.com/s_MLA_v_G_f_113049086_8640.jpg?desch=1.01"></li>
			</ul> 
		</div> 

	</div> 

	<div> 

		<h2 class="container">Tab Navigator</h2>

		<div class="YOUR_SELECTOR_TabNavigator ch-tabNavigator"> 
			<ul class="ch-tabNavigator-triggers"> 
				<li><a href="#tab1-b" class="ch-tab-trigger ch-tab-trigger-on">Tab1</a></li> 
				<li><a href="#tab2-b" class="ch-tab-trigger">Tab2</a></li> 
				<li><a href="#tab3-b" class="ch-tab-trigger">Tab3</a></li> 

			</ul> 
			<div class="box"> 

				<div id="tab1-b"> 
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.</p>						
				</div> 

				<div id="tab2-b" class="ch-js-hide"> 
					<p>Vestibulum posuere purus non enim pharetra vel vulputate eros hendrerit. Ut pulvinar placerat risus quis interdum. Mauris eget tempus risus. Aenean accumsan dolor in lorem elementum ac tincidunt urna rutrum. Sed sit amet nunc velit, vitae tincidunt ipsum. Fusce mattis elementum justo, et lacinia odio pharetra a.</p> 

				</div> 

				<div id="tab3-b" class="ch-js-hide"> 
					<p>Sed sit amet nunc velit, vitae tincidunt ipsum. Fusce mattis elementum justo, et lacinia odio pharetra a. Donec egestas imperdiet eros a interdum. Suspendisse sodales, ligula vitae pulvinar aliquam, elit justo pretium urna, ut hendrerit arcu dolor vitae ipsum.</p> 
				</div>				
			</div> 
	
		</div>
		
		
		
		<div class="YOUR_SELECTOR_TabNavigator ch-tabNavigator ch-tab-vertical"> 
			<ul class="ch-tabNavigator-triggers"> 
				<li><a href="#tab1-b" class="ch-tab-trigger ch-tab-trigger-on">Tab1</a></li> 
				<li><a href="#tab2-b" class="ch-tab-trigger">Tab2</a></li> 
				<li><a href="#tab3-b" class="ch-tab-trigger">Tab3</a></li> 
			</ul> 
			<div class="box"> 
				<div id="tab1-b"> 
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.</p>						
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.</p>						
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.</p>						
				</div> 
				<div id="tab2-b" class="ch-js-hide"> 
					<p>Vestibulum posuere purus non enim pharetra vel vulputate eros hendrerit. Ut pulvinar placerat risus quis interdum. Mauris eget tempus risus. Aenean accumsan dolor in lorem elementum ac tincidunt urna rutrum. Sed sit amet nunc velit, vitae tincidunt ipsum. Fusce mattis elementum justo, et lacinia odio pharetra a.</p> 
				</div> 
				<div id="tab3-b" class="ch-js-hide"> 
					<p>Sed sit amet nunc velit, vitae tincidunt ipsum. Fusce mattis elementum justo, et lacinia odio pharetra a. Donec egestas imperdiet eros a interdum. Suspendisse sodales, ligula vitae pulvinar aliquam, elit justo pretium urna, ut hendrerit arcu dolor vitae ipsum.</p> 
				</div>				
			</div> 
		</div>
	</div> 


	<div class="box">
		<div class="ch-gallery">
			<ul>
				<li>
					<a href="http://bimg1.mlstatic.com/s_MLA_v_F_f_123861867_7560.jpg">
						<img src="http://img2.mlstatic.com/s_MLA_v_O_f_123861867_7560.jpg" data-thumbnail="http://img2.mlstatic.com/s_MLA_v_M_f_123861867_7560.jpg">
					</a>
				</li>
				<li>
					<a href="http://bimg1.mlstatic.com/s_MLA_v_F_f_123861867_1722.jpg">
						<img src="http://img2.mlstatic.com/s_MLA_v_O_f_123861867_1722.jpg" data-thumbnail="http://img2.mlstatic.com/s_MLA_v_M_f_123861867_1722.jpg">
					</a>
				</li>
				<li>
					<img src="http://img2.mlstatic.com/s_MLA_v_O_f_123861867_5931.jpg" data-thumbnail="http://img2.mlstatic.com/s_MLA_v_M_f_123861867_5931.jpg">
				</li>
				<li>
				
				<object height="400" width="500" style="padding: 0; margin-bottom:30px;">
				<param name="movie" value="http://www.youtube.com/e/g2NIgwXXrrs?enablejsapi=1&version=3">
				<param name="allowFullScreen" value="false">
				<param name="allowScriptAccess" value="always">
				<param name="wmode" value="opaque">
				<embed src="http://www.youtube.com/e/g2NIgwXXrrs?enablejsapi=1&version=3" type="application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" height="400" width="500" wmode="opaque">
				</object>
				
				</li>
			</ul>
		</div>
	</div>

	<div class="box"> 
		<h2>Icons</h2>
		<ul class="showroomIcons">
			<li><span class="ch-ico ch-error">Error</span></li>
			<li><span class="ch-ico ch-help">Help</span></li>
			<li><span class="ch-ico ch-information">Info</span></li>
			<li><span class="ch-ico ch-attention">Attention</span></li>
			<li><span class="ch-ico ch-ok">ok</span></li>
			<li><span class="ch-ico ch-check">check</span></li>
		</ul>
	</div> 
	
	<div class="box"> 
		<h2>Message boxes</h2>
		<ul class="showroomIcons">
			<li><p class="ch-message ch-error">Oops, something wrong happened</p></li>
			<li><p class="ch-message ch-help">Do you need any help?</p></li>
			<li><p class="ch-message ch-information">Here's more information</p></li>
			<li><p class="ch-message ch-attention">Warning! something might be wrong</p></li>
			<li><p class="ch-message ch-ok">Everything is great!</p></li>
			<li><p class="ch-message ch-check">Everything is okay</p></li>
		</ul>
	</div> 

	<div class="box"> 
		<h2>Calendar</h2>
		<form action="/test.html" class="YOUR_SELECTOR_Formcalendar ch-form">
			<fieldset>
				<legend>Calendar</legend>
				<p class="ch-form-row"> 
					<label for="val_date">
						Fecha:
					</label>													
					<input type="date" id="val_date" class="myCalendar"  placeholder="DD/MM/YYYY"> <!-- value="18/11/2011" -->
				</p>
			</fieldset>
		</form>
	</div>

	<div class="box"> 
		<h2>Form and Watchers</h2> 

		<form action="http://localhost:3000/test/post" class="ch-form" method="POST"> 
			<fieldset> 
				<legend>Inputs</legend> 
				<p class="ch-form-hint">* Required fields</p> 
					<p class="ch-form-row"> 
						<label for="input_ico">
							Icon:
						</label>													
						<input type="text" id="input_ico" name="input_ico" size="30" placeholder=""> 
						<span class="ch-form-ico ico help">Warning:</span>
					</p>
					<p class="ch-form-row"> 
						<label for="input_button">
							Category:
						</label>													
						<input type="text" id="input_button" name="input_button" size="30" placeholder=""> 
						<input type="button" name="add_category" value="Add" class="ch-btn ch-secondary ch-skin"> 
						<span class="ch-form-hint">Add your category</span>
					</p>
					<p class="ch-form-row ch-form-required"> 
						<label for="price">
							Price:
							<em>*</em>
						</label>													
						<input type="number" id="price" name="price" required="required" size="6" placeholder="1349.43"> 
						<span class="ch-form-hint">Numbers and dot symbol</span>
					</p>
					<p class="ch-form-row ch-form-required"> 
						<label for="email">
							E-mail: 
							<em>*</em>
						</label>												
						<input type="email" id="email" name="email" required="required" size="35" placeholder="juan.perez@chico-ui.com.ar"> 
						<span class="ch-form-hint">It will be your login name</span> 
					</p> 
					<p class="ch-form-row"> 
						<label for="email2">
							E-mail: 
						</label>												
						<input type="email2" id="email2" name="email2" required="required" size="35" placeholder="juan.perez@chico-ui.com.ar"> 
						<input type="checkbox" id="news" name="news" checked="checked" class="ch-form-checkbox-inline"> 
						<label for="news" class="ch-label-inline">
							Accept to receive weekly news
						</label>
					</p> 
					<p class="ch-form-row"> 
						<label for="url">
							URL:
						</label> 
						<input type="url" id="url" name="url" size="60" placeholder="http://www.chico-ui.com.ar"> 
					</p>
					<p class="ch-form-row"> 
						<label for="number">
							Numeric field:
						</label>
						<input type="number" id="number" name="number" size="2" min="18" max="99" placeholder="30"> 
					</p> 
					<p class="ch-form-row"> 
						<label for="range">
							Numeric range:
						</label>
						<input type="range" id="range" name="range" min="1" max="10">
						<span class="ch-form-hint">Between 1 to 10</span> 
					</p>
					<p class="ch-form-row ch-form-required ch-form-disabled"> 
						<label for="required_disabled">
							Required disabled: 
							<em>*</em>
						</label>
						<input type="text" id="required_disabled" required="required" disabled="disabled"> 
						<span class="ch-form-hint">It's a unknown use case</span>
					</p> 
					<p class="ch-form-row"> 
						<label for="characters"> 
							Characters: 
						</label> 
						<input type="text" id="characters"> 
					</p> 
					<p class="ch-form-row"> 
						<label for="custom"> 
							Custom: 
						</label> 
						<input type="text" id="custom" placeholder="12" size="2"> 
					</p>
					<p class="ch-form-row"> 
						<label for="readonly"> 
							Readonly: 
						</label> 
						<input type="text" readonly="readonly" id="readonly" value="its a readonly value"> 
					</p>
					<p class="ch-form-row"> 
						<label for="double"> 
							It's a input text with double line: 
						</label> 
						<input type="text" id="double"> 
					</p>
			</fieldset> 
			<fieldset> 
				<legend>Selects</legend> 
				<p class="ch-form-row"> 
					<label for="select1"> 
						Common field: 
					</label> 
					<select id="select1"> 
						<option value="-1">Select one...</option> 
						<option value="1">Option 1</option> 
						<option value="2">Option 2</option> 
						<option value="3">Option 3</option> 
						<option value="4">Option 4</option> 
					</select> 

				</p> 
				<p class="ch-form-row ch-form-required"> 
					<label for="select2"> 
						Rquired: <em>*</em> 
					</label> 
					<select id="select2" required="required" pattern="[^-1]"> 
						<option value="">Select one...</option> 
						<option value="1">Option 1</option> 
						<option value="2">Option 2</option> 
						<option value="3">Option 3</option> 
						<option value="4">Option 4</option> 
					</select> 
				</p> 
				<p class="ch-form-row ch-form-required ch-form-disabled"> 
					<label for="select3" class="required disabled"> 
						Required disabled: <em>*</em>
					</label> 
					<select id="select3" required="required" disabled="disabled"> 
						<option value="">Select one...</option> 
						<option value="1">Option 1</option> 
						<option value="2">Option 2</option> 
						<option value="3">Option 3</option> 
						<option value="4">Option 4</option> 
					</select> 
				</p> 
				<p class="ch-form-row ch-form-disabled"> 
					<label for="select4"> 
						Disabled: 
					</label> 
					<select id="select4" disabled="disabled"> 
						<option value="0">Select one...</option> 
						<option value="1">Option 1</option> 
						<option value="2">Option 2</option> 
						<option value="3">Option 3</option> 
						<option value="4">Option 4</option> 
					</select> 
				</p> 
			</fieldset> 
			<fieldset> 
				<legend>Misc</legend> 
				<p class="ch-form-row"> 
					<label for="street"> 
						Domicilio: 
					</label> 
					<input type="text" size="30" id="street" placeholder="Av. Costanera Rafael Obligado" />
					<input type="number" size="4" id="door" placeholder="1345" />
					<select id="state"> 
						<option value="">Select one state/province...</option> 
						<option value="1">Option 1</option> 
						<option value="2">Option 2</option> 
						<option value="3">Option 3</option> 
						<option value="4">Option 4</option> 
					</select>
				</p>
				<p class="ch-form-row"> 
					<label for="select5"> 
						Common field: 
					</label> 
					<select id="select5"> 
						<option value="0">Select one...</option> 
						<option value="1">Option 1</option> 
						<option value="2">Option 2</option> 
						<option value="3">Option 3</option> 
						<option value="4">Option 4</option> 
					</select>
					<input type="text" id="secondary_option" placeholder="Common field" />
				</p>
				<p class="ch-form-row"> 
					<label for="num1"> 
						Cuit: 
					</label> 
					<input type="number" size="2" id="num1" placeholder="20" /> -
					<input type="number" size="10" id="num2" placeholder="23111399" /> / 
					<input type="number" size="1" id="num3" placeholder="4" />
				</p>
				<p class="ch-form-row"> 
					<label for="tc1"> 
						Vencimiento: 
					</label> 
					<input type="number" size="2" id="tc1" min="1" max="12" placeholder="11" />
					<input type="number" size="6" id="tc2" min="2011" max="2020" placeholder="2013" />
				</p>
				<p class="ch-form-row"> 
					<label for="select6"> 
						Características del inmueble: 
					</label> 
					<select id="select6" multiple="multiple" size="5" class="ch-form-select-multiple"> 
						<option value="0">Aire acondicionado</option> 
						<option value="1">Dormitorio en suite</option> 
						<option value="2">Balcón</option> 
						<option value="3">Lavadero</option> 
						<option value="4">Cocina</option> 
						<option value="5">Living</option> 
						<option value="6">Comedor</option> 
						<option value="7">Amenities</option> 
					</select>
				</p>
				
			</fieldset> 
			<fieldset> 
				<p class="ch-form-options ch-form-required check2"> 
					<input type="checkbox" value="alpha" id="check4a" name="version4" required="required"> 
					<label for="check4a"> 
						Unique checkbox
					</label>
				</p>
			</fieldset>
			<fieldset> 
				<legend>Checkbox</legend> 
					<div class="ch-form-options">
						<h4 class="ch-form-subtitle">Label of checkboxs group:</h4>
						<p class="ch-form-row">
							<input type="checkbox" value="alpha" id="check1a" name="version1a" required="required"> 
							<label for="check1a"> 
								Alpha 
							</label>
						</p>
						<p class="ch-form-row">
							<input type="checkbox" value="beta" id="check1b" name="version1b"> 
							<label for="check1b"> 
								Beta 
							</label>
						</p>
					</div> 
			</fieldset> 

			<fieldset> 
				<legend>Legend of required group <em>*</em></legend>
				<div class="ch-form-options check2"> 
					<p class="ch-form-row">
						<input type="checkbox" value="alpha" id="check2a" name="version2"> 
						<label for="check2a"> 
							Alpha
						</label>
					</p>
					<p class="ch-form-row">
						<input type="checkbox" value="beta" id="check2b" name="version2"> 
						<label for="check2b"> 
							Beta
						</label>
					</p>
				</div>
			</fieldset>

			<fieldset> 
				<legend>Legend of checkboxs group</legend> 
				<div class="ch-form-options ch-form-required check3"> 
					<h4 class="ch-form-subtitle">Label of required group: <em>*</em></h4> 
					<p class="ch-form-row">
						<input type="radio" value="alpha" id="check3a" name="version3"> 
						<label for="check3a"> 
							Alpha 
						</label> 
					</p>
					<p class="ch-form-row">
						<input type="radio" value="beta" id="check3b" name="version3"> 
						<label for="check3b"> 
							Beta
						</label>
					</p>
				</div>
			</fieldset>

			<fieldset> 
				<legend>Radio buttons</legend> 
				<div class="ch-form-options"> 
					<p class="ch-form-row">
						<input type="radio" value="alpha" id="radio1a" name="version4"> 
						<label for="radio1a"> 
							Alpha
						</label>
					</p>
					<p class="ch-form-row">
						<input type="radio" value="beta" id="radio1b" name="version4"> 
						<label for="radio1b"> 
							Beta
						</label>
					</p>
				</div> 
			</fieldset> 
	
			<fieldset> 
				<legend>Radio buttons required <em>*</em></legend> 
				<div class="ch-form-options radio2"> 
					<p class="ch-form-row">
						<input type="radio" value="alpha" id="radio2a" name="version5"> 
						<label for="radio2a"> 
							Alpha
						</label>
					</p>
					<p class="ch-form-row">
						<input type="radio" value="beta" id="radio2b" name="version5"> 
						<label for="radio2b"> 
							Beta
						</label>
					</p>
				</div> 
			</fieldset> 
	
			<fieldset> 
				<legend>Legend of Radios group</legend> 
				<div class="ch-form-options ch-form-required radio3"> 
					<h4 class="ch-form-subtitle">Radios required: <em>*</em></h4>
					<p class="ch-form-row">
						<input type="radio" value="alpha" id="radio3a" name="version6"> 
						<label for="radio3a"> 
							Alpha
						</label>
					</p>
					<p class="ch-form-row">
						<input type="radio" value="beta" id="radio3b" name="version6"> 
						<label for="radio3b"> 
							Beta
						</label>
					</p>
				</div> 
			</fieldset> 
			
			<fieldset> 
				<div class="ch-form-options radio4"> 
					<p class="ch-form-row">
						<input type="radio" value="alpha" id="radio4a" name="version7"> 
						<label for="radio4a"> 
							It's a long label to use to show where the item be positioned
						</label>
					</p>
					<p class="ch-form-row">
						<input type="radio" value="beta" id="radio4b" name="version7"> 
						<label for="radio4b"> 
							Beta
						</label>
					</p>
				</div> 
			</fieldset>
			
			<fieldset> 
				<legend>Textarea</legend> 
				<p class="ch-form-row"> 
					<label for="textarea1"> 
						Textarea: 
					</label> 
					<textarea id="textarea1"></textarea> 
				</p> 
					
				<p class="ch-form-row ch-form-required"> 
					<label for="textarea2"> 
						Obligatorio: <em>*</em>
					</label> 
					<textarea id="textarea2" required="required"></textarea> 
				</p> 

				<p class="ch-form-row ch-form-required ch-form-disabled"> 
					<label for="textarea3"> 
						Required disabled: <em>*</em> 
					</label> 
					<textarea id="textarea3" required="required" disabled="disabled"></textarea> 
				</p>
				
				<p class="ch-form-row ch-form-disabled"> 
					<label for="textarea4"> 
						Disabled: 
					</label> 
					<textarea id="textarea4" disabled="disabled"></textarea> 
				</p> 
			</fieldset> 

			<p class="ch-form-actions">
				<input type="submit" name="_eventId_confirmation" value="Webflow" class="ch-btn ch-primary lean">
				<!--input type="submit" value="Send" class="ch-btn ch-primary"--> 
				<input type="reset" value="Cancel" class="ch-btn ch-secondary"> 
				<a href="#" class="resetForm">Reset validations</a> 
			</p> 
		</form>	

	</div> 
	
	<script src="http://code.jquery.com/jquery-1.7.js"></script>
	<script src="src/js/chico-0.9.1.js?debug=true"></script>
	<script src="/src/plugins/gallery/chico.gallery.js"></script>
	<script> 

		// Automatic version
        var title = document.title + ' ' + ch.version;
        document.title = title; // Use old school because IE6 dosen't work fine with DOM API.
        document.getElementsByTagName("h1")[0].innerHTML = title;

		// Components
		
		// AutoComplete
		var ac = $(".autoComplete").autoComplete({url:"http://chico.com:8080/suggest/"});
		
		var autoComplete = function(data){
			ac.suggest(data);
		}
		
		// Blink
		$("#doHighlight").bind("mousedown",function(){$("#example").blink();});
		
		// Accordion
		var ch_acco = $(".YOUR_SELECTOR_Accordion").accordion({
			selected: "1#2"
		});
		
		// Menu
		var ch_menu = $(".YOUR_SELECTOR_Menu").menu();
		
		// Dropdown
		var ch_drop = $(".YOUR_SELECTOR_Dropdown").dropdown();
		var ch_drop = $(".myDropdown").dropdown();

		// Carousel
		var ch_caro = $(".YOUR_SELECTOR_Carousel").carousel({
			pagination:true
		});
					
		// Modal
		var ch_moda = $(".YOUR_SELECTOR_Modal").modal({
			width: "500px",
			height: "300px"
		});
		
		// Modal with invisible DOM Content		
		var ch_moda_invisible = $(".YOUR_SELECTOR_Modal_invisible").modal({ 
		  content:"#invisible-content"
		});
		
		// Transition
		var ch_tran = $(".YOUR_SELECTOR_Transition").transition();
		
		// Layer on click
		var ch_layeC = $(".YOUR_SELECTOR_LayerCloseButton").layer({
			event: "click",
			closeHandler: "button",
			content: "#invisible-content-for-layer"
		});
		
		// Layer on click
		var ch_laye = $(".YOUR_SELECTOR_LayerOnclick").layer({
			event: "click",
			content: "#invisible-content"
		});
		
		// Layer on mouseover
		var ch_layr = $(".YOUR_SELECTOR_LayerOnmouseover").layer("<p>foo</p>");

		// Tooltip
		var ch_tool = $(".YOUR_SELECTOR_Tooltip").tooltip();

		// Tab Navigator
		var ch_tabs = $(".YOUR_SELECTOR_TabNavigator").tabNavigator();

		// Expando
		var ch_expa = $(".YOUR_SELECTOR_Expando").expando();

		// Calendar
		var calendar = $(".myCalendar").calendar({
			selected: "2011/11/15",
			from: "2010/11/05",
			to: "2012/11/25"
		});

		var ch_ico = $(".ch-form-ico").layer({content:"Help",event:"click", offset:"-12 15"});
			
		// Form
		var ch_form = $('.form').form();

		// Watchers
		var ch_wprice = $("#price").price("Price please!").and().required("algo");
		var ch_wch1 = $("#email").required("requerid").and().email("Guachin emial").and().minLength(10);
		var ch_wch11 = $("#custom").custom(function(v){ return (v.toString().indexOf("1")>-1) ? true : false ;},"Mensjae largo para probar mensaje de varias lineas y ajustar el padding interno de la caja.")
												.and()
												.required()
												.and()
												.custom(function(v){ 
													count++;
													console.log("Custom " + count )
													return (v.toString().indexOf("2")>-1) ? true : false ;
												},"2");
		var ch_wch3 = $("#number").number().and().min(20);
		var ch_wch4 = $("#range").min(1).and().max(10);
		var ch_wch5 = $("#characters").maxLength(20).and().minLength(6);
		var ch_wch6 = $("#required_disabled, #select2, #select3, .check2, .check3, .radio2, .radio3, .radio4, #textarea2, #textarea3").required("Required");


		// Gallery
		var ch_gal = $(".ch-gallery").gallery();

	</script>
</body> 
</html>
